<template>
  <div>
    <el-form ref="formSearch"
             :model="formSearch"
             label-width="100px"
             size="small"
             :inline="true">
      <el-form-item>
        <el-button type="primary"
                   size="small"
                   @click.stop="handleAdd()">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small"
                   plain
                   @click.stop="typeManage()">部门管理</el-button>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="formSearch.checked">仅显示主管</el-checkbox>
      </el-form-item>
      <el-form-item label="账户状态:">
        <el-select v-model="formSearch.status"
                   placeholder="账户状态"
                   style="width:100px">
          <el-option label="全部"
                     value=''></el-option>
          <el-option label="已启用"
                     :value="0"></el-option>
          <el-option label="已禁用"
                     :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门:">
        <el-cascader :change-on-select="true"
                     :options="getDepartmentTreeSelect"
                     v-model="searchDepartment"
                     :clearable="true"></el-cascader>
      </el-form-item>
      <el-form-item label="角色类型:">
        <el-select v-model="formSearch.role"
                   placeholder="角色类型">
          <el-option label="全部"
                     value=''></el-option>

          <el-option v-for="item in userByRolesOption"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账户名:">
        <el-input v-model="formSearch.username"
                  placeholder="请输入账户名"></el-input>
      </el-form-item>
      <el-form-item label="姓名:">
        <el-input v-model="formSearch.name"
                  placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系方式:">
        <el-input v-model="formSearch.phone"
                  placeholder="请输入联系方式"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="searchFormSubmit()">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleReset()">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <avue-crud :option="tableOption"
               :data="tableData"
               :table-loading="tableLoading"
               :page="page"
               ref="crud"
               @size-change='sizeChange'
               @current-change="currentPage">
      <template slot-scope="scope"
                slot="status">
        {{scope.row.status===1?'已禁用':'已启用'}}
      </template>
      <template slot-scope="scope"
                slot="role">
        {{getRoles(scope.row.role)}}
      </template>
      <template slot-scope="scope"
                slot="department">
        {{scope.row.department.name}}
      </template>
      <template slot-scope="scope"
                slot="editTime">
        {{ scope.row.name }}<span>-</span>{{ scope.row.state }}
      </template>
      <template slot-scope="scope"
                slot="menu">
        <el-button type="primary"
                   size="small"
                   plain
                   @click.stop="handleEdit(scope.row, scope.index)">修改</el-button>
        <el-button type="primary"
                   size="small"
                   plain
                   @click.stop="handleDelete(scope.row, scope.index)">删除</el-button>
      </template>
    </avue-crud>
    <!-- 添加/修改用户 -->
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogFormVisible"
               width="40%"
               class="diading">
      <el-form ref="dialogForm"
               :model="dialogForm"
               :rules="rules"
               label-position="left"
               label-width="100px">
        <el-row>
          <el-col :span="16">
            <el-form-item label="账户名："
                          prop="userName">
              <el-input v-model="dialogForm.userName"
                        placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="登陆密码："
                          prop="password">
              <el-input v-model="dialogForm.password"
                        type='password'
                        placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="用户姓名："
                          prop="name">
              <el-input v-model="dialogForm.name"
                        placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="联系方式："
                          prop="mobile">
              <el-input v-model="dialogForm.mobile"
                        placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7"
                  :offset="1">
            <el-form-item label=""
                          label-width="0"
                          prop="facePortrait">
              <el-upload :action="actionUrl"
                         :headers="uploadHeaders"
                         name="file"
                         :show-file-list="false"
                         accept="image/*"
                         :on-success="uploadSuccess"
                         :on-error="uploadError"
                         class="avatar-uploader">
                <img v-if="dialogForm.facePortrait"
                     :src="dialogForm.facePortrait"
                     class="avatar"
                     width="165px"
                     height="210px"
                     style="object-fit: cover;" />
                <i v-else
                   class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属部门："
                          prop="department">
              <el-cascader :change-on-select="true"
                           :options="getDepartmentTree"
                           v-model="dialogDepartment"
                           :clearable="true"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="角色类型："
                          prop="roles">
              <el-select v-model="dialogForm.roles"
                         style="width:100%">
                <el-option v-for="item in userByRolesOption"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否主管："
                          prop="isManage">
              <!-- <el-radio-group> -->
              <el-radio v-on:change="radioChange()"
                        v-model.number="dialogForm.isManage"
                        :label="0">是</el-radio>
              <el-radio :label="1"
                        v-model.number="dialogForm.isManage"
                        v-on:change="radioChange()">否</el-radio>
              <!-- </el-radio-group> -->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否启用："
                          prop="status">
              <!-- <el-radio-group v-model.number="dialogForm.status"> -->
              <el-radio :label="0"
                        v-model.number="dialogForm.status"
                        v-on:change="radioChange()">启用</el-radio>
              <el-radio :label="1"
                        v-model.number="dialogForm.status"
                        v-on:change="radioChange()">禁用</el-radio>
              <!-- </el-radio-group> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer"
           class="dialog-footer"
           style="text-align:center">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
        <el-button type="primary"
                   @click="handleAddLine('dialogForm')">确 认</el-button>
      </div>
    </el-dialog>
    <!-- 部门管理 -->
    <el-dialog title="部门管理"
               :visible.sync="dialogTypeManageVisible"
               width="40%">
      <div>
        <div class="add-type">
          <el-button type="primary"
                     size="small"
                     @click="appendTreeType()">添加</el-button>
        </div>
        <el-tree :data="getDepartmentTree"
                 :props="treeOption"
                 :expand-on-click-node="false"
                 default-expand-all
                 @node-click="handleNodeClick()">
          <div class="custom-tree-node"
               slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text"
                         size="mini"
                         @click="() => addDepartment(node, data)">添加</el-button>
              <el-button type="text"
                         size="mini"
                         @click="() => editTree(node, data)">修改</el-button>
              <el-button type="text"
                         size="mini"
                         @click="() => removeTree(node, data)">删除</el-button>
            </span>
          </div>
        </el-tree>
      </div>
      <div slot="footer"
           class="dialog-footer"
           style="text-align:center">
        <el-button @click="dialogTypeManageVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 添加分类 -->
    <el-dialog title="添加分类"
               :visible.sync="dialogFormTypeVisible"
               width="30%">
      <el-form ref="dialogFormType"
               :model="dialogFormType"
               :rules="rulesType"
               label-position="left"
               label-width="110px">
        <!-- <el-form-item label="项目分类："
                      prop="parentId">
          <el-cascader v-model="dialogFormType.parentId"
                       :options="getDepartmentTree"
                       :show-all-levels="false"
                       @change="handleTree"
                       :props="cascaderPeops"
                       style="width:100%">
            <template slot-scope="{ node, data }">
              <span>{{ data.label }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item> -->
        <el-form-item label="部门名称："
                      prop="content"
                      label-width="110px">
          <el-input v-model="dialogFormType.content"
                    type="textarea"
                    :autosize="{ minRows: 6, maxRows: 10 }"
                    placeholder="在每个分类后面敲击 “ 回车键 ” “换行”，可批量添加分类。"
                    @keyup.enter.native="changeInput"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer"
           style="text-align:center">
        <el-button @click="dialogFormTypeVisible = false">关 闭</el-button>
        <el-button type="primary"
                   @click="handleAddType('dialogFormType')">确 认</el-button>
      </div>
    </el-dialog>
    <!-- 修改样品分类名字 -->
    <el-dialog title="修改分类"
               :visible.sync="dialogTypeTitleVisible"
               width="24%">
      <el-form ref="dialogTypeTitle"
               :model="dialogTypeTitle"
               :rules="rulesTypeTitle"
               label-width="80px"
               label-position="left">
        <el-form-item label="分类:"
                      prop="parentId">
          <el-cascader v-model="dialogTypeTitle.parentId"
                       :options="getDepartmentTree"
                       :change-on-select="true"
                       @change="handleTree"
                       :props="cascaderPeops"
                       style="width:100%">
            <template slot-scope="{ node, data }">
              <span>{{ data.label }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item label="名称:"
                      prop="name">
          <el-input v-model="dialogTypeTitle.name"
                    placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer"
           style="text-align:center">
        <el-button @click="dialogTypeTitleVisible = false">关 闭</el-button>
        <el-button type="primary"
                   @click="handleEditTypeTitle('dialogTypeTitle')">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userListOption } from "@/const-personal/sysSetup/user.js";
import { validateAcquaintance, checkPhone } from "@/util/validate.js";
import {
  getUserList,
  getDepartmentList,
  getUserByRolesType,
  addUser,
  deleteRolesItem,
  updateUser,
  //部门
  addDepartment,
  updateDepartment,
  deleteDepartment,
  findByIdPicture
} from "@/api/sysSetup/uesr.js";
import { getToken } from "@/util/auth";
import { DepartmentTreeVChildrenNull, getDepartmentTreeOfId ,getDepartmentTreeOfValue } from '@/util/util'
import website from "@/const/website";
export default {
  name: "userList",
  data () {
    return {
      formSearch: {
        role: "",
        name: "",
        department: '',
        status: '',
        checked: "",
        username: '',
        phone: ''
      },
      searchDepartment: ['-1'],
      tableOption: userListOption,
      page: {
        total: 10, //总页数
        currentPage: 1, //当前页数
        pageSize: 10, //每页显示多少条
        pageSizes: [5, 10, 20]
      },
      tableLoading: false,
      tableData: [], //数据
      // 新增修改
      dialogTitle: "添加样品",
      dialogFormVisible: false,
      rules: {
        name: [{ required: true, message: "请输入账户名", trigger: "blur" }],
        mobile: [{ required: true, validator: checkPhone, trigger: "blur" }],
        userName: [
          { required: true, message: "请输入用户姓名", trigger: "blur" }
        ],
        password: [
          // { required: true, message: "请输入登陆密码", trigger: "blur" },
          // { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
        ],
        facePortrait: [
          { required: true, message: "请上传照片", trigger: "change" }
        ],
        department: [
          { required: true, message: "请选择所属部门", trigger: "change" }
        ],
        roles: [
          { required: true, message: "请选择角色类型", trigger: "change" }
        ],
        isManage: [
          { required: true, message: "请选择是否主管", trigger: "change" }
        ],
        status: [
          { required: true, message: "请选择是否启用", trigger: "change" }
        ]
      },
      dialogForm: {},
      dialogDepartment: [],
      imgUrl: '',
      departments: [], //部门
      departmentOption: "", //部门option,
      userByRolesOption: "", //角色option
      // 部门管理
      dialogTypeManageVisible: false,
      treeOption: {
        children: "children",
        label: "label",
         multiple: true,
          checkStrictly: true
      },
      treeData: [],
      //增加部门
      dialogFormTypeVisible: false,
      dialogFormType: {},
      rulesType: {
        parentId: [
          { required: true, message: "请选择部门分类", trigger: "change" }
        ],
        content: [{ required: true, message: "请输入分类", trigger: "blur" }]
      },
      // 多级联动配置
      cascaderPeops: {
        value: "id",
        label: "label"
      },
      // 修改部门标题
      dialogTypeTitleVisible: false,
      dialogTypeTitle: { name: "", parentId: [] },
      rulesTypeTitle: {
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        parentId: [{ required: true, message: "不能为空", trigger: "change" }]
      },
      // 上传图片
      actionUrl: `${website.axiosUrl}/externalPersonnel/v1/insert/upload`,
      uploadHeaders: {
        Authorization: getToken()
      },
      fileList: [],
      is_update: false, //修改标识
      getDepartmentTree: [],
      getDepartmentTreeSelect:[]
    };
  },
  mounted () {
    this._getUserList();
    this._getList()
  },
  computed: {
    getRoles (role) { //角色
      return ((role) => {
        return (role.name)
      })
    },
  },
  methods: {
    //   获取列表
    _getUserList (search) {
      let data = {
        page: this.page.currentPage,
        size: this.page.pageSize
      };
      if (search) {
        data['page'] = 1
        data['name'] = search.name
        data['mobile'] = search.phone
        data['username'] = search.username
        data['status'] = search.status
        data['roleId'] = search.role
        data['departmentId'] = search.department
        if (search.checked) {
          data['isManage'] = search.checked ? 0 : 1
        }
      }
      getUserList(data).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.list;
          this.page.total = res.data.data.total;
          this.page.pageSize = res.data.data.pageSize
          this.page.currentPage = res.data.data.pageNum
        }
      });
    },
    // 搜索
    searchFormSubmit () {
      this.formSearch.department = this.searchDepartment[this.searchDepartment.length - 1] == '-1'? '': this.searchDepartment[this.searchDepartment.length - 1]
      this._getUserList(this.formSearch)
    },
    // 重置
    handleReset () {
      this.formSearch = {
        role: "",
        name: "",
        department: '',
        status: '',
        checked: "",
        username: '',
        phone: ''
      }
      this.searchDepartment = ['-1']
    },
    // 切换页面
    currentPage (val) {
      // console.log(val);
      this.page.currentPage = val;
      this._getUserList();
    },
    sizeChange (val) {
      // console.log(val);/
      this.page.pageSize = val
      this._getUserList()
    },
    // 新增
    handleAdd () {
      this.dialogFormVisible = true;
      this.dialogTitle = "添加用户";
      this.is_update = false
      this.dialogDepartment = []
      this.dialogForm = {
        name: "",
        mobile: "",
        userName: "",
        password: "",
        facePortrait: "",
        department: "",
        roles: "",
        isManage: '',
        status: ""
      };
      try {
          this.$refs.dialogForm.resetFields()
      } catch (e) {
          return
      }
    },
    //弹窗 部门 和角色列表
    _getList () {
      getDepartmentList().then(res => {
        if (res.data.code === 200) {
          this.departmentOption = res.data.data;
          this.getDepartmentTreeSelect = DepartmentTreeVChildrenNull(res.data.data,[{label:'全部',value:'-1'}])
          this.getDepartmentTree = DepartmentTreeVChildrenNull(res.data.data)
        }
      });
      getUserByRolesType().then(res => {
        if (res.data.code === 200) {
          this.userByRolesOption = res.data.data;
        }
      });
    },
    // 修改

    async handleEdit (row, index) {
      this.dialogFormVisible = true;
      this.dialogTitle = "修改用户";
      this.is_update = true
      let res = this.tableData.find(item => item.id == row.id)
      this.update_id = res.id
      // console.log(res);
      let img = null
      try {
        img = await findByIdPicture({ id: res.id })
        img = 'http://' + img.data.data
      } catch (error) {
        // console.log(error);
      }
      // console.log(img, 'img');/

      this.dialogDepartment = [res.departmentId]
      this.dialogForm = {
        name: res.name,
        mobile: res.mobile,
        userName: res.username,
        password: '',
        facePortrait: img,
        department: res.department,
        roles: res.roleId,
        isManage: res.isManage,
        status: res.status
      };
      // this.dialogForm['facePortrait'] = img
      // this.departmentOption.forEach(item => {
      //   if (item.id == res.departmentId) {
      //     this.dialogForm.department = item.name
      //   }
      // })
        this.dialogDepartment = getDepartmentTreeOfValue(this.getDepartmentTree,res.departmentId).reverse()
      // console.log(this.getDepartmentTree);

      // this.dialogForm.roles = this.userByRolesOption.find(item => item.id == res.roles[0].id).name
      // console.log(this.dialogForm, '--');

    },
    _deepTree (arr, res) {
      for (let i = 0, len = arr.length; i < len; i++) {
        if (arr[i].id == res.departmentId) {
          this.dialogForm.department = arr[i].label
          break;
        }
        if (arr[i].children) {
          this._deepTree(arr[i].children, res)
        }
      }
    },
    // 删除
    handleDelete (row, index) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        //请求--删除
        deleteRolesItem({ id: row.id }).then(res => {
          if (res.data.code === 200) {
            this._getUserList()
            this.$notify.success('删除成功')
          } else {
            this.$notify.error('删除失败')
          }
        })
      });

    },
    // 确认新增/修改
    handleAddLine (formName) {
      // console.log(this.dialogForm);
      // console.log(this.departments);
      this.dialogForm.department = this.dialogDepartment[this.dialogDepartment.length - 1] || ''
      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = {
            name: this.dialogForm.name, //用户姓名
            username: this.dialogForm.userName, //账户
            password: this.dialogForm.password, //密码
            status: this.dialogForm.status, // 是否启用
            isManage: this.dialogForm.isManage, //是否主管
            mobile: this.dialogForm.mobile, //手机号
            departmentId: this.dialogForm.department, //部门id
            headUrl: this.imgUrl,//图片
            roleId: this.dialogForm.roles
          }
          // console.log(params);
          if (this.is_update) {
            //修改
            params['id'] = this.update_id
            updateUser(params).then(res => {
              if (res.data.code === 200) {
                this.$notify({ title: '操作成功', message: "修改成功!", type: 'success', });
                this.dialogFormVisible = false;
                this.$refs[formName].resetFields();
                this._getUserList();
              } else {
                  this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
              }
            })
          } else {
            //添加
            addUser(params).then(res => {
              if (res.data.code === 200) {
                this.$notify({ title: '操作成功', message: "添加成功!", type: 'success', });
                this.$refs[formName].resetFields();
                this.dialogFormVisible = false;
                this._getUserList();
              } else {
                  this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
              }
            })
          }
        }
      });
    },
    // 点击分类管理
    typeManage () {
      this.dialogTypeManageVisible = true;
    },
    // 新增--部门管理 - 一级部门
    appendTreeType () {
      this.dialogFormTypeVisible = true;
    },
    // 新增--部门管理 - 子级部门
    addDepartment (node, data) {
      this.dialogFormType.parentId = data.value
      this.dialogFormTypeVisible = true;
    },
    //   点击树
    handleNodeClick (data) {
      // console.log(data);
    },
    // 修改标题--部门管理
    editTree (node, data) {
      this.dialogTypeTitle.name = data.label
      this.dialogTypeTitle.id = data.id
      this.dialogTypeTitle.parentId = getDepartmentTreeOfValue(this.getDepartmentTree, data.id)
      this.dialogTypeTitleVisible = true;
    },
    // 删除--部门管理
    removeTree (node, data) {
      /*const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);*/
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
          //请求--删除
          deleteDepartment({ id: data.id }).then(res => {
              if (res.data.code === 200) {
                  this._getList();
                  this.$notify({ title: '操作成功', message: "删除成功!", type: 'success', });
              } else {
                  this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
              }
          })
      });
    },
    // 确认修改--部门管理
    handleEditTypeTitle (formName) {
        this.$refs[formName].validate(valid => {
        if (valid) {
            let data = this.dialogTypeTitle;
            data.parentId = this.dialogTypeTitle.parentId[this.dialogTypeTitle.parentId.length-1]
            updateDepartment(data).then(res=>{
                if(res.data.code==200){
                    this.$refs[formName].resetFields();
                    this.$notify({ title: '操作成功', type: 'success', message: '已修改成功!'});
                    this.dialogTypeTitleVisible = false;
                    this._getList()
                } else {
                    this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
                }
            })

        }
      });
    },
    // 增加--选中树--部门管理
    handleTree (value) {
      // console.log(value);
      //  this.dialogFormType.parentId=value;
    },
    // 增加部门管理---input 回车事件
    changeInput (value) {

      // console.log(this.dialogFormType.content.split('/n'));
      // console.log(value);
    },
    // 确认新增-部门管理--树
    handleAddType (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let text = this.dialogFormType.content.replace(/\n/g, ';')
          let textArr = text.split(';')
          textArr = textArr.filter(item => item !== '')
          text = [];
          textArr.forEach(item=>{
              text.push({
                  name : item ,
                  parentId : this.dialogFormType.parentId
              })
          })
          addDepartment(text).then(res => {
              if(res.data.code==200){
                  this.$refs[formName].resetFields();
                  this.$notify({ title: '操作成功', type: 'success', message: '已成功添加!'});
                  this.dialogFormTypeVisible = false;
                  this._getList()
              } else {
                  this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
              }
          })
        }
      });
    },
    // 图片上传成功
    uploadSuccess (response, file) {
      // console.log(response, file);

      if (response.code === 200) {
        // delete response.data.createTime;
        this.imgUrl = response.data.url;
        this.dialogForm.facePortrait = URL.createObjectURL(file.raw);
        this.$notify.success("图片上传成功");
      } else {
        this.$notify.error(response.message);
      }
    },
    // 图片上传失败
    uploadError (err, file) {
      this.$notify.error(err);
    },
    radioChange () {
      this.$refs['dialogForm'].validate((valid) => {
        return false;
      });
    },
  }
};
</script>

<style scoped>
.add-type {
  padding-bottom: 20px;
  border-bottom: 1px #333 dotted;
  margin-bottom: 20px;
  margin-top: -20px;
}
.custom-tree-node {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
</style>
<style>
.diading .el-dialog {
  min-width: 640px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 165px;
  height: 210px;
  line-height: 210px !important;
  text-align: center;
}
</style>
